<template>
  <div>
    <h1>展示内容:{{ msg }}</h1>
    <input v-model="fn1" type="text" @keyup.enter="fn" />

    <hr />

    <img width="200" :src="imgUrl" alt="" /> <br />
    <input type="file" @change="fn2" />
  </div>
</template>

<script>
//需求：input框里面输入内容，输入完内容按下回车时候，内容展示在h1标签，同时清空输入框内容
export default {
  data() {
    return {
      msg: '',
      fn1: '',
      imgUrl: '',
    }
  },
  methods: {
    fn() {
      //证明用户在输入框里面按下了回车
      //需要把输入框内容和fn进行同步
      this.msg = this.fn1
      //清空输入框内容
      this.fn1 = ''
    },

    // fn(e) {
    //   this.msg = e.target.value
    //   e.target.value = ''
    //   console.log(e)
    // },

    fn2(e) {
      // console.log(e)
      const imgFile = e.target.files[0]
      //传入一个文件对象，获取一个本地可以访问的预览地址
      const imgUrl = URL.createObjectURL(imgFile)
      this.imgUrl = imgUrl
    },
  },
}
</script>

<style></style>
